---
import '../styles/global.css'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
const { pageTitle } = Astro.props
---
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>{pageTitle}</title>
    {/* style 标签内的样式默认组件级别，不会影响到 slot 的内容 */}
    {/* 为 style 标签添加 is:global 属性，可以使该样式影响到所在页面的每个元素 */}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
    </style>
  </head>
  <body>
    <Header />
    <h1>{pageTitle}</h1>
    <slot />
    <Footer />
  </body>
</html>